<template>
  <view class="round-checkbox" :class="{ checked: isChecked }" @click="toggle">
    <view class="checkbox-inner" v-if="isChecked">
      <text class="check-icon">✔</text>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  checked: {
    type: Boolean,
    default: false
  },
  size: {
    type: [Number, String],
    default: 40
  },
  color: {
    type: String,
    default: '#1DCFB7'
  }
})

const emit = defineEmits(['change', 'update:checked'])

const isChecked = ref(props.checked)

watch(() => props.checked, (newVal) => {
  isChecked.value = newVal
})

const toggle = () => {
  isChecked.value = !isChecked.value
  emit('change', isChecked.value)
  emit('update:checked', isChecked.value)
}
</script>

<style scoped>
.round-checkbox {
  width: v-bind(size + 'rpx');
  height: v-bind(size + 'rpx');
  border-radius: 50%;
  border: 2rpx solid #ccc;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
}

.round-checkbox.checked {
  background-color: v-bind(color);
  border-color: v-bind(color);
}

.checkbox-inner {
  width: 60%;
  height: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-icon {
  color: #fff;
  font-size: 24rpx;
  font-weight: bold;
}
</style>